/***********************************************************
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License
 **********************************************************/
@import '../../../css/variables';
@import '../../../css/themes';

@media screen and (min-width: $screenSize) {
    .device-events {
        .scrollable-telemetry {
            height: calc(100vh - 480px);
            overflow-y: auto;
            overflow-x: hidden;
        }

        .scrollable-pnp-telemetry {
            height: calc(100vh - 520px);
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
}

.device-events {
    .device-events-container {
        @include themify($themes) {
            border-top: 1px solid themed('contrastBorder');
        }
        margin-left: 15px;
        .device-events-content {
            @include themify($themes) {
                border-bottom: 1px solid themed('contrastBorder');
            }
            padding: 0 25px;
            width: 100%;
            pre {
                white-space: pre-wrap;
            }
        }
    }

    .consumer-group-label {
        font-weight: 600;
        font-size: 14px;
        @include themify($themes) {
            color: themed('textColor');
        }
    }

    .consumer-group-text-field {
        display: grid;
        padding-left: 24px;
        padding-bottom: 10px;
        @include themify($themes) {
            color: themed('textColor');
        }
        width: 85%;
    }

    .custom-event-hub-label {
        font-weight: 600;
        font-size: 14px;
        @include themify($themes) {
            color: themed('textColor');
        }
    }

    .scrollable-pnp-telemetry {
        .column-value-text {
            .value-validation-error {
                @include themify($themes) {
                    color: themed('errorText');
                }
                padding-top: 10px;
                font-size: 14px;
            }
        }
    }

    .pnp-modeled-list {
        @include themify($themes) {
            background-color: themed('backgroundColor');
        }
        .list-header {
            font-weight: bold;
            border-bottom: 1px solid;
            @include themify($themes) {
                border-bottom-color: themed('borderColor');
            }
            padding-bottom: 5px;
        }
    }

    .item-summary {
        overflow: auto;
        width: 100%;
        border-bottom: 1px solid;
        @include themify($themes) {
            border-bottom-color: themed('borderColor');
        }
    }

    .stack-first-column {
        padding-left: 24px;
        min-width: 22%;
    }

    .stack-second-column {
        .custom-text-field {
            display: grid;
            padding-left: 24px;
            padding-bottom: 10px;
            @include themify($themes) {
                color: themed('textColor');
            }
            width: 80%;
        }
        width: 100%;
    }
}